<template>
	<view class="sexAndAge">
		<!-- 		<Head></Head> -->
		<view class="sexAndAge-middle">
			<h1>选择你的性别和年龄</h1>
			<p>完善信息来个性化你的内容</p>
			<view class="sexAndAge-middle-sex">
				<view class="sexAndAge-middle-sex-left">
					<view class="sexAndAge-middle-sex-left-img">
						<img src="@/static/TestImg/img/sexAndAge/boy.jpg" ref="boy" @click="boy()">
						<p>男生</p>
					</view>

				</view>
				<view class="sexAndAge-middle-sex-right">
					<view class="sexAndAge-middle-sex-right-img">
						<img src="@/static/TestImg/img/sexAndAge/girl.jpg" ref="girl" @click="girl()">
						<p>女生</p>
					</view>
				</view>
			</view>
			<picker-view :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in columns" :key="index">{{ item }}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view class="sexAndAge-bottom">
			<u-button text="下一步" color="#ff2442" shape="circle" :disabled="disabled" @click="goIndex"></u-button>
		</view>
	</view>
</template>
<script>
export default {
	created() {
		this.age();
	},
	mounted() {
		this.boy();
	},
	data() {
		return {
			columns: [],
			sex: "",
			year: "",
			show: true,
			columnss: [],
			value: [24],
			disabled: true,
			userAge: ""
		}
	},
	methods: {
		interest() {

		},
		bindChange(e) {
			if (e.detail.value[0] < 24) {
				this.userAge = e.detail.value[0]
				// console.log(this.userAge);
			};
			if (e.detail.value[0] > 24) {
				this.userAge = e.detail.value[0] - 1;
				// console.log(this.userAge);
			};
			if (e.detail.value[0] != 24) {
				this.disabled = false
			};
			if (e.detail.value[0] == 24) {
				this.disabled = true
			};

		},
		age() {
			for (let i = 0; i < 100; i++) {
				if (i < 25 && i > 23) {
					this.columns.push("上下滑动选择年龄");
				}
				this.columns.push(i);
			}
		},
		onChange(value, index) {
			// Toast(`当前索引：${index}`);
			this.year = index;
			if (this.year != 24) {
				this.interestBtn();
			}
		},
		boy() {
			this.$refs.boy.style.filter = "grayscale(0)";
			this.$refs.girl.style.filter = "grayscale(100)";
			this.sex = "男";
		},
		girl() {
			this.$refs.boy.style.filter = "grayscale(100)";
			this.$refs.girl.style.filter = "grayscale(0)";
			this.sex = "女";
		},
		interestBtn() {
			if (this.sex == "" && this.year == "") {
				this.$toast.fail("请选择你的性别和年龄");
			} else {
				this.$refs.sexAndAgeBottomBtn.style.backgroundColor = "#fb4a3e";
			}
		},
		goIndex() {
			let sex = this.sex;
			let userAge = this.userAge;
			uni.navigateTo({
				url: "/pages/login/Interest",
				success(res) {
					res.eventChannel.emit('Interest', {
						ser: sex,
						age: userAge
					});
				}
			})
		}
	}
}
</script>
<style>
.sexAndAge {
	width: 100%;
	height: 1600rpx;
	display: flex;
	flex-direction: column;
}

.sexAndAge-top {
	width: 100%;
	height: 8%;
	display: flex;
	justify-content: space-between;
}

.sexAndAge-top-left {
	width: 30%;
	height: 100%;
	background: url("@/static/TestImg/img/logo.jpg") center/cover no-repeat;
}

.sexAndAge-top-right {
	width: 30%;
	height: 100%;
}

.sexAndAge-top-right::before {
	content: '\e65f';
	font-family: "iconfont";
	font-size: 66rpx;
	text-align: center;
	display: block;
	margin-top: 10%;
	margin-left: 30%;
}

.sexAndAge-top-right-pop {
	width: 200rpx;
	height: 60rpx;
	border-radius: 32rpx;
	box-shadow: 2rpx 2rpx 0 0 rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: space-evenly;
}

.sexAndAge-top-right-pop span::before {
	content: '\e630';
	font-family: "iconfont";
	display: inline-block;
	font-size: 30rpx;
}

.sexAndAge-top-right-pop span {
	display: inline-block;
	margin-top: 6rpx;
	margin-left: 12rpx;
	position: relative;
	z-index: 6;
}

.sexAndAge-middle {
	width: 100%;
	height: 90%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.sexAndAge-middle h1 {
	margin-top: 10%;
	text-align: center;
}

.sexAndAge-middle p {
	text-align: center;
}

.sexAndAge-middle-sex {
	width: 100%;
	height: 30%;
	margin-top: 5%;
	display: flex;
	justify-content: space-evenly;
}

.sexAndAge-middle-sex-left-img,
.sexAndAge-middle-sex-right-img {
	width: 200rpx;
	height: 200rpx;

}

.sexAndAge-middle-sex-right-img img,
.sexAndAge-middle-sex-left-img img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin-top: 50%;
	object-fit: contain;
	object-fit: cover;
	filter: grayscale(100%);
}

.sexAndAge-middle-sex-left-img p,
.sexAndAge-middle-sex-right-img p {
	text-align: center;
	margin-top: 20rpx;
}


.picker-view {
	width: 750rpx;
	height: 450rpx;
	margin-top: 20rpx;
}

.item {
	line-height: 100rpx;
	text-align: center;
}

.sexAndAge-bottom {
	margin-top: 150rpx;
}
</style>